<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵魂问题列表</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">问题列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="showAdd">添加问题</el-button>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="id" label="问题id" >
        </el-table-column>
        <el-table-column prop="name" label="所属问卷" >
        </el-table-column>
        <el-table-column prop="question" label="问题内容">
        </el-table-column>

        <el-table-column label="操作" >
            <!--
                slot-scope:是遍历临时的对象,通过row属性就可以获取到当前行中的所有数据
            -->
            <template slot-scope="props">
                <el-button type="warning" @click="showEdit(props.row)">编辑</el-button>
                <el-button type="danger" @click="deleteRoute(props.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[5,10,15, 20]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <!--
          :model="formData": 关联数据
          :rules: 关联校验规则
          ref： 在获取表单对象时使用
      -->
    <el-dialog title="添加问题信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <!--<el-form :model="formData"  ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="线路名称">
                <el-input v-model="formData.rname"></el-input>
            </el-form-item>
            <v-for></v-for>
            <el-form-item label="线路介绍">
                <el-input v-model="formData.routeIntroduce"></el-input>
            </el-form-item>
            <el-form-item label="线路价格" >
                <el-input v-model="formData.price" ></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="saveRoute()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>-->

        <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item
                    prop="exam"
                    label="问卷级别"
                    :rules="{ required: true, message: '请输入问卷级别', trigger: 'blur' }">
                <el-input v-model="formData.exam"></el-input>
            </el-form-item>
            <el-form-item
                    prop="question"
                    label="问题"
                    :rules="{ required: true, message: '请输入问题', trigger: 'blur' }">
                <el-input v-model="formData.question"></el-input>
            </el-form-item>
            <el-form-item
                    v-for="(domain, index) in formData.options"
                    :label="'选项及得分'"
                    :key="domain.key"
                    :prop="'options.' + index + '.option'"
                    :rules="{required: true, message: '选项或得分不能为空', trigger: 'blur'}">
                <el-input v-model="domain.option"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveRoute()">提交</el-button>
                <el-button @click="addDomain">新增选项</el-button>
                <el-button @click="resetForm('formData')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--
      &lt;!&ndash;
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        &ndash;&gt;
    -->

    <el-dialog title="修改问题信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">
        <el-form :model="updateData"  ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item    :prop="exam"
                             label="问卷级别"
                             :rules="{ required: true, message: '请输入问卷级别', trigger: 'blur' }">
                <el-input v-model="updateData.exam"></el-input>
            </el-form-item>
            <el-form-item  :prop="question"
                           label="问题"
                           :rules="{ required: true, message: '请输入问题', trigger: 'blur' }">
                <el-input v-model="updateData.question"></el-input>
            </el-form-item>


                <template v-for="(item,i) in updateData.options">
                    <el-form-item
                            :key="item.option"
                            :prop="`updateData.${i}.option`"
                            :rules="item.rule"
                            label="选项"
                    >
                        <el-input
                                v-model="item.option"
                                clearable
                                autocomplete="off"

                        ></el-input>
                    </el-form-item>
                    <el-form-item
                            :key="i"
                            :prop="`updateData.${i}.score`"
                            :rules="item.rule"
                            label="得分"
                    >
                        <el-input v-model="item.score" clearable autocomplete="off"></el-input>
                    </el-form-item>
                </template>
            <el-form-item align="right">
                <el-button type="warning" @click="updateRoute()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData: {
                options: [{
                    option:'',
                }],
                exam:'',
                question:'',
                id:''
            },//添加表单的数据
            updateData: {
                options: [{
                    option:'',
                    score:''
                }],
                exam:'',
                question:''
            },//修改表单的数据1
            tableData: [],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            options: []

        },
        methods: {
            findByPage(){
                //发送ajax请求,查询指定页的数据
                axios.get("findQuestionPage",{
                    params:{
                        pageNumber:this.pagination.currentPage,
                        pageSize:this.pagination.pageSize
                    }
                }).then(resp=>{
                    //将返回的pageInfo对象赋值给elementUI
                    //1.将list赋值给table的tableData
                    this.tableData = resp.data.items;

                    //2.将total赋值给分页插件的total
                    this.pagination.total = resp.data.counts;
                });
            },
            /*当每页显示条数发生变更的时候,重新查询数据*/
            handleSizeChange(val) {
                //alert(val);
                this.pagination.pageSize = val;
                this.findByPage();
            },
            /*当页码发生变更的时候,重新查询数据*/
            handleCurrentChange(val) {
                //alert("你点击的是"+val);
                this.pagination.currentPage = val;
                this.findByPage();
            },
            showAdd(){
                //显示添加的对话框
                this.dialogTableVisible4add = true;

            },
            showEdit(obj){
                this.dialogTableVisible4edit=true;

                axios.get("findById?id="+obj.id).then(resp=>{
                    this.updateData=resp.data;
                });


            },
            updateRoute(){
                //发送ajax请求,更新数据
                axios.post("updateQuestion",this.updateData).then(resp=>{
                    //当更新成功的时候,关闭对话框,重新查询所有
                    if(resp.data=="ok"){
                        //关闭对话框
                        this.dialogTableVisible4edit=false;

                        //重新查询所有
                        this.findByPage();
                    }
                });
            },
            saveRoute(){
                //发送ajax的post请求,请求的参数 addform的formData,若添加成功了,关闭dialog,重新查询所有
                axios.post("addSoulQuestion",this.formData).then(resp=>{
                    if(resp.data=="ok"){
                        //1.关闭dialog
                        this.dialogTableVisible4add=false;
                        //2.清空formData(表单)
                        this.formData={};
                        //3.重新查询所有
                        this.findByPage();
                    }
                });
            },
            deleteRoute(obj){
                //弹出确认框,确定的时候发送ajax请求执行删除操作
                if(confirm("确定要删除吗?")){
                    axios.get("deleteQuestion?id="+obj.id).then(resp=>{
                        if(resp.data=="ok"){

                            //固定代码, 处理总页面溢出
                            const totalPage = Math.ceil((this.pagination.total - 1) / this.pagination.pageSize) // 计算总页数
                            this.pagination.currentPage = this.pagination.currentPage > totalPage ? totalPage : this.pagination.currentPage;
                            this.pagination.currentPage = this.pagination.currentPage < 1 ? 1 : this.pagination.currentPage;

                            //重新查询所有
                            this.findByPage();
                        }
                    });
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                var index = this.formData.options.indexOf(item)
                if (index !== -1) {
                    this.formData.options.splice(index, 1)
                }
            },
            addDomain() {
                this.formData.options.push({
                    option: '',
                    
                });
            }
        },
        created() {
            //页码加载成功的时候,调用findByPage方法
            this.findByPage();


        }
    });
</script>
</html>